<%@page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>数据详情</title>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/common/table.css">
    <%@include file="../include/commonFile.jsp" %>
</head>
<body>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">

            <div class="list-content">
                <h1 class="f24 tc mt5">${name}</h1>
                <div class="cl">
                    <table class="layui-table">
                        <colgroup>
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>数据</th>
                            <th>报名</th>
                            <th>订单</th>
                            <th>资金(元)</th>
                            <th>访问</th>
                            <th>会员</th>
                            <th>实名会员</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                今日
                            </td>
                            <td>
                                ${map.today.applyNum}
                            </td>
                            <td>
                                ${map.today.orderNum}
                            </td>
                            <td>
                                <fmt:formatNumber value="${map.today.money}" pattern="0.00"/>
                            </td>
                            <td>
                                ${map.today.viewNum}
                            </td>
                            <td>
                                ${map.today.memberNum}
                            </td>
                            <td>
                                ${map.today.realMemberNum}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                昨日
                            </td>
                            <td>
                                ${map.yesterday.applyNum}
                            </td>
                            <td>
                                ${map.yesterday.orderNum}
                            </td>
                            <td>
                                <fmt:formatNumber value="${map.yesterday.money}" pattern="0.00"/>
                            </td>
                            <td>
                                ${map.yesterday.viewNum}
                            </td>
                            <td>
                                ${map.yesterday.memberNum}
                            </td>
                            <td>
                                ${map.yesterday.realMemberNum}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                前日
                            </td>
                            <td>
                                ${map.beforeYDay.applyNum}
                            </td>
                            <td>
                                ${map.beforeYDay.orderNum}
                            </td>
                            <td>
                                <fmt:formatNumber value="${map.beforeYDay.money}" pattern="0.00"/>
                            </td>
                            <td>
                                ${map.beforeYDay.viewNum}
                            </td>
                            <td>
                                ${map.beforeYDay.memberNum}
                            </td>
                            <td>
                                ${map.beforeYDay.realMemberNum}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                本周
                            </td>
                            <td>
                                ${map.week.applyNum}
                            </td>
                            <td>
                                ${map.week.orderNum}
                            </td>
                            <td>
                                <fmt:formatNumber value="${map.week.money}" pattern="0.00"/>
                            </td>
                            <td>
                                ${map.week.viewNum}
                            </td>
                            <td>
                                ${map.week.memberNum}
                            </td>
                            <td>
                                ${map.week.realMemberNum}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                本月
                            </td>
                            <td>
                                ${map.month.applyNum}
                            </td>
                            <td>
                                ${map.month.orderNum}
                            </td>
                            <td>
                                <fmt:formatNumber value="${map.month.money}" pattern="0.00"/>
                            </td>
                            <td>
                                ${map.month.viewNum}
                            </td>
                            <td>
                                ${map.month.memberNum}
                            </td>
                            <td>
                                ${map.month.realMemberNum}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                历史
                            </td>
                            <td>
                                ${map.history.applyNum}
                            </td>
                            <td>
                                ${map.history.orderNum}
                            </td>
                            <td>
                                <fmt:formatNumber value="${map.history.money}" pattern="0.00"/>
                            </td>
                            <td>
                                ${map.history.viewNum}
                            </td>
                            <td>
                                ${map.history.memberNum}
                            </td>
                            <td>
                                ${map.history.realMemberNum}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div id="page_content" class="page-container"></div>

            <form class="layui-form" method="post">
                <div class="f-search-bar">
                    <div class="search-container">
                        <ul class="search-form-content">
                            <li class="form-item">
                                <label class="search-form-lable">数据</label>
                                <div class="check-btn-inner">
                                    <a href="javascript:void(0);" onclick="submit($(this),0)">报名</a>
                                    <a href="javascript:void(0);" onclick="submit($(this),1)">订单</a>
                                    <a href="javascript:void(0);" onclick="submit($(this),2)">资金</a>
                                    <a href="javascript:void(0);" onclick="submit($(this),3)" class="active">访问</a>
                                    <a href="javascript:void(0);" onclick="submit($(this),4)">会员</a>
                                    <input type="hidden" name="type" id="type" value=""/>
                                </div>
                                <div class="cl"></div>
                            </li>
                            <li class="form-item">
                                <label class="search-form-lable">时间</label>
                                <div class="layui-input-inline">
                                    <select id="length" name="length" lay-filter="length">
                                        <option value="7">最近7天</option>
                                        <option value="15">最近15天</option>
                                        <option value="30" selected>最近30天</option>
                                        <option value="0">最近12周</option>
                                        <option value="-1">最近12月</option>
                                    </select>
                                </div>
                                <div class="cl"></div>
                            </li>
                        </ul>
                    </div>
                </div>
            </form>
            <div class="content mt15" id="charts" style="height:400px;"></div><!--底部-->
        </div>

        <%@include file="../include/footer.jsp" %>
    </section>
</div>



<script type="text/javascript" src="${ctx}/script/common/list.js"></script>
<script type="text/javascript" src="${ctx}/script/common/table_option.js"></script>
<script type="text/javascript" src="${ctx}/static/echarts-3.0/echarts.min.js"></script>
<script type="text/javascript" src="${ctx}/static/echarts-3.0/base_config.js"></script>
<script type="text/javascript">

    $(function () {
        layui.use(['form', 'laydate'], function () {
            form = layui.form, laydate = layui.laydate;
            form.on('select(length)', function (data) {
                var type = $("#type").val();
                var length = data.value;
                getData(type, length);
            });
        });
    });

    function getData(type, length) {
        var memberId = '${memberId}';
        $.get('${ctx}/merchant/analyze/chart.do',
            {type: type, length: length, memberId: memberId},
            function (res) {
                var charts = echarts.init(document.getElementById('charts'));

                var option = {
                    title: {
                        text: '数据趋势图',
                    },
                    xAxis: {
                        data: res.data.dateList
                    },
                    series: [{
                        name: '数据量',
                        type: 'line',
                        data: res.data.dataList,
                    }]
                };
                option = getEchartBaseLineOpt(option);
                charts.setOption(option);
            })
    }

    getData('', '');

    function submit(obj, value) {
        $(obj).parent(".check-btn-inner").find("a").removeClass("active");
        $(obj).addClass("active");
        $(obj).parent(".check-btn-inner").find("[type=hidden]").val(value);
        var type = $("#type").val();
        var length = $("#length").val();
        getData(type, length);
    }
</script>
<script type="text/javascript">
    txz.initHeader({
        nav:[{
            name: '合作商数据分析',
            href: '${ctx}/merchant/analyze/list.do'
        },{
            name: '数据详情',
            curr: true
        }],
        btns:[{
            name: '返回',
            href: 'javascript:history.back();',
            icon: 'back'
        }]
    });
</script>
</body>
</html>